<template>
  <div class="code-block-container">
    <pre v-show="!showCodeEditor">
      <code :class="'language-' + language" class="code-block" v-html="highlightedCode"></code>
      <div class="code-block-overlay">
        <el-tooltip content="复制" placement="top">
          <el-button class="code-block-btn" icon="el-icon-copy" @click="copyToClipboard"></el-button>
        </el-tooltip>
        <el-tooltip content="编辑" placement="top">
          <el-button class="code-block-btn" icon="el-icon-edit" @click="showCodeEditor = true"></el-button>
        </el-tooltip>
      </div>
    </pre>
    <div v-show="showCodeEditor">

      <div class="code-block-editor-overlay">
        <el-tooltip content="保存" placement="top">
          <el-button class="code-block-btn" icon="el-icon-check" @click="saveCode"></el-button>
        </el-tooltip>
        <el-tooltip content="取消" placement="top">
          <el-button class="code-block-btn" icon="el-icon-close" @click="showCodeEditor = false"></el-button>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
import Prism from 'prismjs';

export default {
  name: 'CodeTest',
  props: {
    code: {
      type: String,
      required: true
    },
    language: {
      type: String,
      default: 'javascript'
    }
  },
  data() {
    return {
      highlightedCode: '',
      showCodeEditor: false
    };
  },
  mounted() {
    this.highlightedCode = Prism.highlight(this.code, Prism.languages[this.language], this.language);
  },
  methods: {
    copyToClipboard() {
      // copy to clipboard logic
    },
    saveCode() {
      // save code logic
      this.showCodeEditor = false;
      this.highlightedCode = Prism.highlight(this.code, Prism.languages[this.language], this.language);
    }
  }
};
</script>

<style scoped>
.code-block-container {
  position: relative;
}

.code-block {
  background-color: #f4f4f4;
  padding: 16px;
  overflow: auto;
}

.code-block-overlay {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.code-block-btn {
  width: 32px;
  height: 32px;
}

.code-block:hover .code-block-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

.code-block-editor-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  display: none;
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.code-block-editor-overlay:hover {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
